var app = getApp()

Page({
  data: {
    canvasW:'320',
    canvasH:'150',
    // 趋势定位
    arrHeight:['600','500','700','700','650','400','500'],
    loginArrHeight:[],
    pitch:"pitch",
    winWidth: 0,
    winHeight: 0,
    // tab切换  
    currentTab: 0,
    // 圆图选中判断
    oneImg:'',
    twoImg:'',
    treeImg:'',
    fourImg:'pitch',
    fiveImg:'',
    sixImg:'',
    sevenImg:'',
    // 价格显示控制
    onenum: 'numnone',
    twonum: 'numnone',
    treenum: 'numnone',
    fournum: 'numblock',
    fivenum: 'numnone',
    sixnum: 'numnone',
    sevennum: 'numnone',
    // 按钮选中状态
    listpitchOne: 'listNopitch',
    listpitchTwo: 'listNopitch',
    listpitchTree: 'listNopitch',
    listpitchFour: 'listpitch',
    listpitchFive: 'listNopitch',
    listpitchSix: 'listNopitch',
    listpitchSeven: 'listNopitch',
  },

  onLoad: function () {
    
    var that = this;
    this.setData({
      loginArrHeight: this.data.arrHeight
    });
    this.setData({
      arrHeight: this.numerationY(this.data.arrHeight)
    });

    const ctx = wx.createCanvasContext('myCanvas');

    ctx.setStrokeStyle("#3A3B3A");
    
    // 设置线宽
     ctx.setLineWidth(2);
    // 开始起点
    ctx.fillStyle = '#999';
    ctx.moveTo(0, 320);
    ctx.lineTo(0, this.data.arrHeight[0]);
    // 定位
    ctx.lineTo(15, this.data.arrHeight[0]);
    ctx.lineTo(60, this.data.arrHeight[1]);
    ctx.lineTo(110, this.data.arrHeight[2]);
    ctx.lineTo(155, this.data.arrHeight[3]);
    ctx.lineTo(205, this.data.arrHeight[4]);
    ctx.lineTo(260, this.data.arrHeight[5]);
    ctx.lineTo(310, this.data.arrHeight[6]);
    // 结束起点
    ctx.lineTo(320, this.data.arrHeight[6]);
    ctx.lineTo(320, 320);
    // 对当前路径进行描边
    ctx.closePath();
   
    ctx.stroke();
    ctx.fill();
    ctx.draw();


    var Charts = require('../../utils/wxcharts-min.js'); 
    new Charts({
      animation: true,
      canvasId: 'ringCanvas',
      type: 'ring',
      extra: {
        ringWidth: 10,
        pie: {
          offsetAngle: -180
        }
      },
      title: {
        name: '40%',
        color: '#27E372',
        fontSize: 18
      },

      series: [{
        name: '成交量1',
        data: 40,
        stroke: false,
        color: '#27E372'
      }, {
        name: '成交量2',
        data: 60,
        stroke: false,
        color: '#F3F3F3'
      }],
      disablePieStroke: true,
      width: 120,
      height: 120,
      dataLabel: false,
      legend: false,
      padding: 0
    });
    new Charts({
      animation: true,
      canvasId: 'ringCanvasTwo',
      type: 'ring',
      extra: {
        ringWidth: 10,
        pie: {
          offsetAngle: -180
        }
      },
      title: {
        name: '80%',
        color: '#27E372',
        fontSize: 18
      },

      series: [{
        name: '成交量1',
        data: 80,
        stroke: false,
        color: '#27E372'
      }, {
        name: '成交量2',
        data: 20,
        stroke: false,
        color: '#F3F3F3'
      }],
      disablePieStroke: true,
      width: 120,
      height: 120,
      dataLabel: false,
      legend: false,
      padding: 0
    });
    new Charts({
      animation: true,
      canvasId: 'ringCanvasThree',
      type: 'ring',
      extra: {
        ringWidth: 10,
        pie: {
          offsetAngle: -180
        }
      },
      title: {
        name: '20%',
        color: '#27E372',
        fontSize: 18
      },

      series: [{
        name: '成交量1',
        data: 20,
        stroke: false,
        color: '#27E372'
      }, {
        name: '成交量2',
        data: 80,
        stroke: false,
        color: '#F3F3F3'
      }],
      disablePieStroke: true,
      width: 120,
      height: 120,
      dataLabel: false,
      legend: false,
      padding: 0
    });
  },
  // 动态圆图切换
  // 高度定位转换Y轴
  numerationY: function (arrHeight) {
    var maxN = Math.max.apply(null, arrHeight);
    var canvasH = Number(this.data.canvasH);
    var avgHeight = canvasH / maxN ;
    var arrFinalPos = [];
    var num = 10;
    for (var i = 0; i < this.data.arrHeight.length;i++){
    
      var finalPos = canvasH - avgHeight * Number(this.data.arrHeight[i]) + num;
    arrFinalPos.push(finalPos);

    };

  return arrFinalPos;
    
  },
 

  btn1:function(){
    if (this.data.oneImg !== 'pitch'){
      this.setData({
        oneImg: 'pitch',twoImg: '',treeImg: '',fourImg: '',fiveImg: '',sixImg: '',sevenImg: '',
        onenum: 'numblock', twonum: 'numnone', treenum: 'numnone', fournum: 'numnone', fivenum: 'numnone', sixnum: 'numnone', sevennum: 'numnone',
        listpitchOne: 'listpitch', listpitchTwo: 'listNopitch', listpitchTree: 'listNopitch', listpitchFour: 'listNopitch', listpitchFive: 'listNopitch', listpitchSix: 'listNopitch', listpitchSevern: 'listNopitch',
      })
 
    }
  },
  btn2: function () {
    if (this.data.twoImg !== 'pitch') {
      this.setData({
        oneImg: '', twoImg: 'pitch', treeImg: '', fourImg: '', fiveImg: '', sixImg: '', sevenImg: '',
        onenum: 'numnone', twonum: 'numblock', treenum: 'numnone', fournum: 'numnone', fivenum: 'numnone', sixnum: 'numnone', sevennum: 'numnone',
        listpitchOne: 'listNopitch', listpitchTwo: 'listpitch', listpitchTree: 'listNopitch', listpitchFour: 'listNopitch', listpitchFive: 'listNopitch', listpitchSix: 'listNopitch', listpitchSevern: 'listNopitch',
      })
    }
  },
  btn3: function () {
    if (this.data.treeImg !== 'pitch') {
      this.setData({
        oneImg: '', twoImg: '', treeImg: 'pitch', fourImg: '', fiveImg: '', sixImg: '', sevenImg: '',
        onenum: 'numnone', twonum: 'numnone', treenum: 'numblock', fournum: 'numnone', fivenum: 'numnone', sixnum: 'numnone', sevennum: 'numnone',
        listpitchOne: 'listNopitch', listpitchTwo: 'listNopitch', listpitchTree: 'listpitch', listpitchFour: 'listNopitch', listpitchFive: 'listNopitch', listpitchSix: 'listNopitch', listpitchSevern: 'listNopitch',
      })
    }
  },
  btn4: function () {
    if (this.data.fourImg !== 'pitch') {
      this.setData({
        oneImg: '', twoImg: '', treeImg: '', fourImg: 'pitch', fiveImg: '', sixImg: '', sevenImg: '',
        onenum: 'numnone', twonum: 'numnone', treenum: 'numnone', fournum: 'numblock', fivenum: 'numnone', sixnum: 'numnone', sevennum: 'numnone',
        listpitchOne: 'listNopitch', listpitchTwo: 'listNopitch', listpitchTree: 'listNopitch', listpitchFour: 'listpitch', listpitchFive: 'listNopitch', listpitchSix: 'listNopitch', listpitchSevern: 'listNopitch',
      })
    }
  },
  btn5: function () {
    if (this.data.fiveImg !== 'pitch') {
      this.setData({
        oneImg: '', twoImg: '', treeImg: '', fourImg: '', fiveImg: 'pitch', sixImg: '', sevenImg: '',
        onenum: 'numnone', twonum: 'numnone', treenum: 'numnone', fournum: 'numnone', fivenum: 'numblock', sixnum: 'numnone', sevennum: 'numnone',
        listpitchOne: 'listNopitch', listpitchTwo: 'listNopitch', listpitchTree: 'listNopitch', listpitchFour: 'listNopitch', listpitchFive: 'listpitch', listpitchSix: 'listNopitch', listpitchSevern: 'listNopitch',
      })
    }
  },
  btn6: function () {
    if (this.data.sixImg !== 'pitch') {
      this.setData({
        oneImg: '', twoImg: '', treeImg: '', fourImg: '', fiveImg: '', sixImg: 'pitch', sevenImg: '',
        onenum: 'numnone', twonum: 'numnone', treenum: 'numnone', fournum: 'numnone', fivenum: 'numnone', sixnum: 'numblock', sevennum: 'numnone',
        listpitchOne: 'listNopitch', listpitchTwo: 'listNopitch', listpitchTree: 'listNopitch', listpitchFour: 'listNopitch', listpitchFive: 'listNopitch', listpitchSix: 'listpitch', listpitchSevern: 'listNopitch',
      })
    }
  },
  btn7: function () {
    if (this.data.sevenImg !== 'pitch') {
      this.setData({
        oneImg: '', twoImg: '', treeImg: '', fourImg: '', fiveImg: '', sixImg: '', sevenImg: 'pitch',
        onenum: 'numnone', twonum: 'numnone', treenum: 'numnone', fournum: 'numnone', fivenum: 'numnone', sixnum: 'numnone', sevennum: 'numblock',
        listpitchOne: 'listNopitch', listpitchTwo: 'listNopitch', listpitchTree: 'listNopitch', listpitchFour: 'listNopitch', listpitchFive: 'listNopitch', listpitchSix: 'listNopitch', listpitchSevern: 'listpitch',
      })
    }
  },
  /** 
     * 滑动切换tab 
     */
  bindChange: function (e) {
    var that = this;
    that.setData({ currentTab: e.detail.current });
  },
  /** 
   * 点击tab切换 
   */
  swichNav: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },

})